<% include ../layout/easydPHP_header.ejs %>
		
    <section id="tutorial" class="ftco-section ftco-work">
    	<div class="container-fluid">
    		<div class="row justify-content-center mb-5 pb-5">
          <div class="col-md-7 text-center heading-section ftco-animate">
            <h2 class="mb-2">视频教程</h2>
            <span class="subheading">通过视频的方式快速的教会大家使用框架，本视频是对使用文档的视频化，会针对文档进行视频讲解</span>
          </div>
        </div>
        <div class="row justify-content-center mb-5 pb-5">

          <% for(var i=0;i<dataList.length;i++){ %>
        	<div class="col-md-4 ftco-animate">
        		<div class="work-entry">
							<div class="img" style="background:url('/image/ed-31.jpg');position:relative;">
								<div class="videoPlayerBg"></div>
								<div class="videoPlayerBtn">
										<span class="icon icon-play">
								</div>
								<div class="videoRecording">正在录制，请稍候</div>
							</div>
							
							<div class="videoPlayerContent"><%- dataList[i].v_name %><div class="videoPlayerCount">播放量：<%- dataList[i].v_play_count %></div></div>
        		</div>
          </div>
          <% } %>

         


        </div>
    	</div>
    </section>

    <section class="ftco-section-parallax">
      <div class="parallax-img d-flex align-items-center">
        <div class="container">
          <div class="row d-flex justify-content-center">
            <div class="col-md-7 text-center heading-section heading-section-white ftco-animate">
              <h2>有什么疑问可以加入我们一起学习</h2>
              <p>免费开源项目，只为让开发更加便捷，如果你想了解更多或者想取得联系欢迎联系我们</p>
            </div>
          </div>
        </div>
      </div>
		</section>
		<style>
			.work-entry .img{
				height:300px;
			}
			.videoPlayerBtn {
					font-size:60px;
					color:#fff;
					text-align: center;
					width:100px;
					height:100px;
					cursor:pointer;
			}

			.videoPlayerBg {
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				background:rgba(0,0,0,0.5);
			}

			.videoPlayerBtn .videoPlayerBtnBorder {
				position:absolute;
				opacity: 0.6;
				width:100px;
				height:100px;
				z-index:10;
			}

			.videoPlayerBtn span {
				position:absolute;
				opacity: 0.7;	
				z-index:20;
				top: 37%;
    		left: 47%;
			}

			.videoPlayerBtn span:hover {
				opacity: 0.9;
			}

			.videoPlayerContent {
				width:100%;
				height:40px;
				font-size:14px;
				box-sizing: border-box;
				line-height:40px;
				color:#333;
				border-bottom:1px solid #ddd;
			}

			.videoPlayerCount {
				float:right;
			}

			.videoRecording {
				position: absolute;
				left:0px;
				top:0px;
				width:200px;
				line-height:40px;
				text-align:center;
				height:40px;
				background:rgba(255,255,255,0.5);
				color:#000;
			}
		</style>
    <% include ../layout/easydPHP_footer.ejs %>